<template>
    <div>
        <header class="header flex align-center justify-between">
            <span>成员管理</span>
            <aside class="flex">
                <button class="custom_primary_btn m-1" @click="dialogFormVisible=true">添加成员</button>
                <button class="m-1" :class="{'custom_primary_btn':delFlag,'custom_info_btn':!delFlag}" @click="delUser(checkModel)">批量删除</button>
                <el-input
                    size="small"
                    class="m-1 searchIpt"
                    placeholder="请输入项目名称进行搜索"
                    prefix-icon="el-icon-search"
                    v-model="keywords"
                    @keyup.enter.native="getUser()">
                </el-input>
            </aside>
        </header>
        <div class="list-tableBox">
            <header class="list-header flex align-center">
                <div class="list-row-item flex-1">
                    <!-- <el-checkbox></el-checkbox> -->
                    <input type="checkbox" class="none" id="check000"  v-model="checked" @change="checkedAll">
                    
                    <label for="check000" v-if="checked"><i class="el-icon-success them_color"></i></label>
                    <label for="check000" v-else>
                        <div class="radio_empty"></div>
                    </label>
                    
                </div>
                <div class="list-row-item flex-1">序号</div>
                <div class="list-row-item flex-3">企业微信</div>
                <div class="list-row-item flex-3">所属部门</div>
                <div class="list-row-item flex-2">角色</div>
                <div class="list-row-item flex-2">操作</div>
            </header>
            <main class="list-main">
              <section class="list-row flex align-center" v-for='(item,index) in userList' >
                <div class="list-row-item flex-1">
                    <!-- <el-checkbox v-model="checkModel" :value="item.id"></el-checkbox> -->
                    <!-- <input type="checkbox"  v-model="checkModel" :value="item.id"> -->
                    <input type="checkbox" class="none" :value="item.id" :id="'check'+item.id"  v-model="checkModel">
                    
                    <label :for="'check'+item.id" v-if="checkModel.includes(item.id)"><i class="el-icon-success them_color"></i></label>
                    <label :for="'check'+item.id" v-else>
                        <div class="radio_empty"></div>
                    </label>
                </div>
                <div class="list-row-item flex-1">{{index+1}}</div>
                <div class="list-row-item flex-3">{{item.wx_name}}</div>
                <div class="list-row-item flex-3">{{item.dept_name}}</div>
                <div class="list-row-item flex-2">{{item.role_name}}</div>
                <div class="list-row-item flex-2">
                    <span class="text_primary pointer" type="primary" @click="changeRole(item);">更换角色</span>
                    <span class="text_danger pointer" type="danger" @click="delUser([item.id],index)">删除</span>
                </div>
              </section>
              
            </main>
        </div>
        <footer class="pageBox flex align-center justify-end">
            <!-- <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageIndex"
                :page-size="pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total">
            </el-pagination> -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-size="100"
            layout="total,  prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </footer>
        


        <el-dialog title="添加成员" :visible.sync="dialogFormVisible" width='420px'>
            <div class="dialog_title relative flex align-center justify-between">
                <div class="">添加成员</div>
                <!-- <i class="el-icon-close pointer" @click="dialogDesignVisible=false"></i> -->
            </div>
            <div style="">
                <el-form label-position='left'>
                    <el-form-item label="企业微信名" :label-width="formLabelWidth">
                        <el-input v-model="userObj.wx_name" autocomplete="off" size='small' @keyup.enter.native="saveUser();" placeholder="例如：junxianguan"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="所属部门" :label-width="formLabelWidth">
                        <el-select v-model="userObj.depart1" size="small" placeholder="请选择所属部门" @change="changeDepart()">
							<el-option :label="item.department_name" :value="item.id" v-for='(item,index) in departList'></el-option>
						</el-select>
						<el-select v-model="userObj.department_id" size="small" placeholder="">
							<el-option v-for='(item,index) in subDepartList' :label="item.department_name" :value="item.id"></el-option>
						</el-select>
                    </el-form-item> -->
                    <el-form-item label="成员权限" :label-width="formLabelWidth">
                        <el-select v-model="userObj.role_id" size='small' width='100%' placeholder="请选择角色">
                            <el-option v-for="(item) in roleData" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <button class="custom_primary_btn" @click="saveUser();">提交</button>
                <button class="custom_info_btn" @click="dialogFormVisible = false">取消</button>
            </div>
        </el-dialog>

        <el-dialog title="更换角色" :visible.sync="dialogRoleVisible" width='430px' class="border-box">
            <div class="dialog_title relative flex align-center justify-between">
                <div class="">更换角色</div>
                <!-- <i class="el-icon-close pointer" @click="dialogDesignVisible=false"></i> -->
            </div>
            <div>
                <el-form  label-position='left'>
                    <el-form-item label="更换前的角色" label-width="104px">
                        <!-- <el-input v-model="userObj.user_name" autocomplete="off" size='small'></el-input> -->
                        <div class="c_000">{{roleObj.role_name}}</div>
                    </el-form-item>
                    <el-form-item label="更换后的角色" label-width="104px">
                        <el-select v-model="roleObj.role_id" size='small' placeholder="请选择角色">
                            <el-option v-for="(item) in roleData" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">

                <button class="custom_primary_btn" @click="updateRole();">更换</button>
                <button class="custom_info_btn" @click="dialogRoleVisible = false">取消</button>
            </div>
        </el-dialog>

        <el-dialog title="" :visible.sync="dialogDelVisible" width='536px'>
            <div class="dialog_title relative flex align-center justify-between">
                <div class="">是否彻底删除选中的角色吗？</div>
                <!-- <i class="el-icon-close pointer" @click="dialogDesignVisible=false"></i> -->
            </div>
            <p class="del_text">
                角色删除后，该角色下的用户将被设置为普通成员，<br/>
                并将同步删除该角色下的用户所分配的权限，删除后信息不可恢复。
            </p>
            <div slot="footer" class="dialog-footer">
                <button class="custom_primary_btn" @click="delApi()">删除</button>
                <button class="custom_info_btn" @click="dialogDelVisible = false">取消</button>
            </div>
        </el-dialog>
        <div class="toastBox" v-show="toastFlag">{{toastMsg}}</div>

    </div>
</template>

<script>
// import { mapState } from 'vuex'
export default {
    name:'user',
    data(){
        return{
            userList:[],
            checked:false,
            checkModel:[],
            roleList:[],
            departList:[],
		    subDepartList:[],
            userObj:{
                dept:'',
                dept_id:'1',
                dept_name:'测试部',
                wx_name:"",
                role_id:"",
                role_name:''
            },
            roleData:[], //角色数据
            roleObj:{},
            dialogFormVisible:false,
            dialogRoleVisible:false,
            dialogDelVisible:false,
            formLabelWidth: '104px',
            delFlag:false,
            keywords:"",
            pageIndex:1, //当前页
            total:20,   //总条数
            pageSize:10, //每页多少条数据
            toastFlag:false,
            toastMsg:''
        }
    },
    mounted(){
        this.getUser();
        console.log(this.roleData)
        this.roleData = this.$store.state.roleData
        // this.getRole();
        // this.getDepart();
    },
    // computed:{
    //     ...mapState(['roleData'])
    // },
    watch:{
        checkModel(){
            if(this.checkModel.length==this.userList.length){
                this.checked=true;
            }else{
                this.checked=false;
            }
            if(this.checkModel.length>0) {
                this.delFlag = true
            }else{
                this.delFlag = false
            }
        }
    },
    methods:{
        getUser(){ //获取用户
            let that = this;
            that.userList = []
            this.$axios.get('/api/member/list',{
                params:{
                    pageIndex:that.pageIndex,
                    pageSize:that.pageSize,
                    keywords:that.keywords
                }
            }).then(res=>{
                that.total = 0;
                if(res.data.code == '200'){
                    that.userList = res.data.data
                    that.total = res.data.count
                }
                
            })
        },
        checkedAll(){ //全选
            if(!this.checked){
                this.checkModel=[];
            }else{
                this.userList.forEach((item)=>{
                    if(this.checkModel.indexOf(item.id)==-1){
                        this.checkModel.push(item.id)
                    }
                })
            }
        },
        saveUser(){ //添加成员
            let that = this;
            this.dialogFormVisible = false;
            this.userObj.role_name = this.roleData.filter(item=>item.id===that.userObj.role_id)[0]['name']
            this.$axios.post('/api/user/save',this.userObj).then(res=>{
                if(res.data.code === '200'){
                    that.getUser();
                }
                that.userObj = {
                    dept:'',
                    dept_id:'',
                    wx_name:"",
                    role_id:""
                }
            })
        },
        delUser(arr,index){ //删除成员
            let that = this;
            if(arr.length<1) return;
            this.dialogDelVisible = true;
        },
        delApi(){
            let that = this;
            that.$axios.post('/api/user/delete',{idArr:arr}).then((res)=>{
                if(res.data.code === '200'){
                    that.getUser();
                    that.checkModel = [];
                }
            })
        },
        changeRole(item){   //选择更换角色
            this.roleObj=item;
            this.dialogRoleVisible=true;
            if(item.id ===2){
                let arr = this.roleData.filter((val)=>{
                    return val.id != 1
               })
               this.roleData = arr;
            }

        },
        updateRole(){ //更换角色
            let that = this;
            this.dialogRoleVisible = false;
            this.roleObj.role_name = this.roleData.filter(item=>item.id===that.roleObj.role_id)[0]['name']
            console.log(this.roleObj);
            this.$axios.post('/api/user/update_role',{
                id:that.roleObj.id,
                role_id:that.roleObj.role_id,
                role_name:that.roleObj.role_name
            }).then((res)=>{
                console.log(res)
            })
        },
        // getRole(){
        //     let that = this;
        //     that.roleList = []
        //     this.$axios.get('/api/rloe/list').then((res)=>{
        //         if(res.data.data && res.data.data.length>0){
        //             that.roleList = res.data.data
        //         }
        //     })
        // },
        // getDepart(){
		// 	let that = this;
        //     that.departList = []
        //     this.$axios.get('/api/department/list').then((res)=>{
		// 		if(res.data.data && res.data.data.length>0){
		// 	  		that.departList = that.formDepart(res.data.data)
		// 		}
        //     })
	  	// },
		// formDepart(arr){
		// 	let that = this;
		// 	arr.forEach((item,index)=>{
		// 		item.label = item.department_name;
		// 		item.value = item.id;
		// 		if(item.children && item.children.length>0) {
		// 			that.formDepart(item.children)
		// 		}else{
		// 			delete item.children
		// 		}
		// 	})
		// 	return arr;
		// },
		// changeDepart(){	//切换部门
		// 	let that = this;
		// 	let id = this.userObj.depart1;
		// 	this.userObj.department_id = '';
		// 	this.departList.forEach((item,index)=>{
		// 		if(item.id === id) {
		// 			that.subDepartList = item.children;
		// 			return;
		// 		}
		// 	})
		// },
        
        handleCurrentChange(page){
            this.pageIndex = page;
            this.getUser();
        },
        handleSizeChange(){},

    }
}
</script>

<style scoped lang='less'>
    /deep/ .el-dialog{
        padding: 28px !important;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0 auto 50px !important;
    }
    /deep/ .el-dialog__header{
        display: none !important;
    }
    /deep/ .el-dialog__body{
        padding: 0 !important;
        .el-select{
            width: 100% !important;
        }
    }
    .dialog_title{
        font-size: 20px;
        color: #000000;
        letter-spacing: 0;
        line-height: 16px;
        opacity: 0.95;
        font-weight: 500;
        margin-bottom: 20px;
        i{
        color: #E3E3E3;
        }
    }
    .del_text{
        margin: -6px 0;
        font-size: 16px;
        color: #000000;
        opacity: .5;
        letter-spacing: 0;
        line-height: 28px;
        font-weight: 400;
    }
    /deep/ .el-dialog__footer{
        padding: 0;
        margin-top: 20px;
    }
    /deep/ .el-form-item{
        margin-bottom: 14px;
    }

/deep/ .el-input__inner{
    border-radius: 30px;
}

.dialog-footer .custom_primary_btn,.dialog-footer .custom_info_btn{
    width: 83px;
    min-width: 83px;
    line-height: 31px;
}

.header{
    span{
        font-weight: 500;
        font-size: 20px;
        color: #000000;
        letter-spacing: 0;
        line-height: 20px;
    }
    /deep/ .searchIpt{
        width: 300px;
    }
    button{
        width: 88px;
        height: 32px;
        border-radius: 16px;
        font-size: 14px;
    }
}
.list-tableBox{
    margin-top: 20px;
        width: 100%;
        height: 100%;
        .list-header{
            height: 60px;
            padding: 0 30px 0 20px;
            background: #f4f6fa;
            font-size: 18px;
            color: #000000;
        
        }
        .list-main{
            padding: 0 20px;
            height: calc(74vh - 60px);
            overflow-y: auto;
            .list-row{
                padding: 20px 0;
                border-bottom: 1px solid #ddd;
                font-size: 16px;
                .text_primary{
                    font-weight: 400;
                    font-size: 16px;
                    color: #006EFF;
                }
                .text_danger{
                    font-weight: 400;
                    font-size: 16px;
                    color: #FF3232;
                    margin-left: 24px;
                }
            }
        }
        .list-main::-webkit-scrollbar { 
            width: 10px;   /* 滚动条宽度， width：对应竖滚动条的宽度  height：对应横滚动条的高度*/
            background: #fff;
        }
        /*定义滚动条轨道（凹槽）样式*/ 
        .list-main::-webkit-scrollbar-track { 
            // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    /* 较少使用 */
            border-radius: 5px; 
        } 
            /*定义滑块 样式*/ 
        .list-main::-webkit-scrollbar-thumb { 
            border-radius: 5px; 
            height: 100px;    /* 滚动条滑块长度 */
            background-color: #95A5B6;
        }

      .list-row-item{
        padding:0 15px;
        line-height: 28px;
        i{
            font-size: 18px;
        }
      }
}
.pageBox{
    margin-top: 30px;
}
</style>


